<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Img - Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

<body>
  <ion-app>

    <ion-header>
      <ion-toolbar>
        <ion-title>Img - Basic</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="ion-padding">
      <f></f>
      <f></f>
      <ion-img class="img-part" src=""></ion-img>
      <f></f>
      <f></f>
      <f></f>
      <f></f>
      <f></f>
      <f></f>
      <ion-img id="hidden" src=""></ion-img>
      <f></f>
      <f></f>
      <f></f>
      <f></f>
      <f></f>
      <f></f>
      <ion-img id="hidden" src="data:image/png;base64,"></ion-img>

    </ion-content>

    <ion-footer>
      <ion-toolbar>
        <ion-title>Footer</ion-title>
      </ion-toolbar>
    </ion-footer>

    <style>
      ion-img.img-part::part(image) {
        border: 1px solid rgba(0, 0, 0, 0.5);
        border-radius: 4px;
      }

      f {
        display: block;
        margin: 15px auto;
        max-width: 150px;
        height: 150px;
        background: blue;
      }

      #hidden {
        width: 300px;
      }

      f:last-of-type {
        background: yellow;
      }

    </style>
  </ion-app>
  <script>
    document.body.addEventListener('ionImgWillLoad', (event) => {
      console.log('image will load', event.target);
    });

    document.body.addEventListener('ionImgDidLoad', (event) => {
      console.log('image did load', event.target);
    });

    document.body.addEventListener('ionError', (event) => {
      console.error('image error', event.target);
    });
  </script>
</body>

</html>
